<template>
	<div class="login" v-if="loginShow">
		<!-- <img class="login-logo" src="../../assets/img/logo-name.png" /> -->
		<div class="login-cont">
			<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form"
			 size="large">
				<div class="login-pic"><img src="../../assets/img/logo.png"></div>
				<h3 class="login-title">中煤开发公司统一门户</h3>
				<el-form-item prop="username">
					<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入用户名"><i slot="prefix" class="el-input__icon el-icon-user"></i></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码" @keyup.enter.native="handleLogin">
						<i slot="prefix" class="el-input__icon el-icon-lock"></i>
					</el-input>
				</el-form-item>
				<el-checkbox style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
				<el-form-item style="width:100%;">
					<el-button :loading="loading" size="large" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
						<span v-if="!loading">登 录</span>
						<span v-else>登 录 中...</span>
					</el-button>
				</el-form-item>
				<p v-if="loginTip" class="login-tip size-13 color-red">{{loginTip}}</p>
			</el-form>
		</div>
	</div>
</template>

<script>
	import $axios from 'axios'
	import {
		setAuthorization //设置登录信息
	} from '@/api/layout/layout.js'
	// import $ from 'jquery'
	import {
		MessageBox, //弹框提示
		Message //消息提示
	} from 'element-ui'
	export default {
		data() {
			return {
				//表单字段
				loginForm: {
					username: '', //用户名
					password: '' //密码
				},
				loginRules: {
					username: [{
						required: true,
						trigger: 'blur',
						message: '用户名不能为空'
					}],
					password: [{
						required: true,
						trigger: 'blur',
						message: '密码不能为空'
					}]
				},
				loading: false, //正在登录
				loginTip: '', //登录错误提示
				loginShow: false //登录页面是否加载
			}
		},
		methods: {
			//登录方法
			handleLogin() {
				this.$refs.loginForm.validate(valid => {
					if (valid) {
						this.loading = true
						$axios.post('/coframe/api/users/login', this.loginForm, {
							baseURL: '/api/'
						}).then((res) => {
							setAuthorization(res.data.token) //设置登录信息
							this.loading = false
							this.$router.push('/layout/homepage') //登录成功跳转到首页
						}).catch((err) => {
							this.loginTip = err.response.data.message //登录错误提示
							setTimeout(() => {
								this.loginTip = ''
							}, 3000)
							this.loading = false
						})
						// $.ajax({
						// 	url: '/api/coframe/api/users/login',
						// 	type: 'post',
						// 	data: JSON.stringify(this.loginForm),
						// 	contentType: 'application/jsoncharset=UTF-8',
						// 	dataType: 'json',
						// 	success: res => {
						// 		setAuthorization(res.token) //设置登录信息
						// 		this.loading = false
						// 		this.$router.push('/layout/homepage')
						// 	},
						// 	error: (xhr, status, error) => {
						// 		MessageBox.alert(xhr.responseJSON.message, '系统提示')
						// 		this.loading = false
						// 	}
						// })
					} else {
						return false
					}
				})
			}
		},
		created() {
			/* 如果存在认证信息，则跳转到指定的地址 */
			setAuthorization().then(res => {
				this.$router.push('/layout/homepage')
			}).catch(() => {
				this.loginShow = true
			})

		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.login-logo {
		position: absolute;
		top: 0;
		left: 5px;
		height: 70px;
		width: auto;
	}

	.login-pic {
		text-align: center;

		img {
			height: 60px;
		}
	}

	.login {
		float: left;
		width: 100%;
		height: 100%;
		display: table;
		background: url('../../assets/img/login_bg3.jpg') no-repeat center center /cover;
	}

	.login-cont {
		display: table-cell;
		text-align: center;
		vertical-align: middle;
	}

	.login-title {
		margin: 0px auto 40px auto;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		color: #495060;
	}

	.login-form {
		display: inline-block;
		text-align: left;
		border-radius: 6px;
		background: #ffffff;
		width: 80%;
		max-width: 360px;
		min-width: 240px;
		padding: 25px 18px 5px;
	}

	.login-tip {
		margin: -16px 0 0;
	}
</style>
